<template>
  <div class="padding_20">
    <el-date-picker v-model="times"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    clearable
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changeTime">
    </el-date-picker>
    <el-input v-model="queryData.deviceName" @clear="handleClearName" class="w-200" placeholder="请输入项目名称" clearable>

    </el-input>
    <el-select v-model="queryData.companyId"
               class="w-200"
               clearable
               filterable
               placeholder="请选择公司"
               @change="handleChangeOption">
      <el-option v-for="item in companyList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>

    <el-select v-model="queryData.type"
               class="w-200"
               placeholder="项目类型"
               @change="handleChangeOption">
      <el-option v-for="item in statusList"
                 :key="item.status"
                 :label="item.name"
                 :value="item.status">
      </el-option>
    </el-select>
    <el-button type="primary"
               @click="handleOption('select')">查询
    </el-button>
    <el-button type="primary"
               @click="handleOption('export')">导出
    </el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">

      <template v-slot:option="{row}">
        <el-button type="primary"
                   @click="handleOption('detail', row)">各分店详情
        </el-button>
      </template>
    </element-table>
    <detail-dialog :dataObj="dataObj"
                   v-if="showDialog"
                   :visible.sync="showDialog"/>
  </div>
</template>

<script>
import ElementTable from "../../../../base/ElementTable";
import consumableDetailDialog from "./consumableDetailDialog";

export default {
  name: "consumableList",
  data() {
    return {
      times: [],
      queryData: {
        signTimeStart: '',
        signTimeEnd: '',
        companyId: '',
        type: 1,
        deviceName: ''
      },
      loading: false,
      showDialog: false,
      dataObj: {},
      pageTotal: 0,
      pageSize: 20,
      pageIndex: 1,
      statusList: [
        {name: '必测项目', status: 1},
        {name: '选测项目', status: 0},
      ],
      columns: [
        {
          label: '项目名称',
          prop: 'deviceName',
          align: "center",
          width: 200
        }, {
          label: '对应病症',
          prop: 'themeName',
          align: "center"
        }, {
          label: '耗材数量',
          prop: 'count',
          align: "center",
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
          width: 200
        }
      ],
      tableData: [],
      companyList: []
    }
  },
  created() {
    this.getCompanyList()
    this.getList()
  },
  components: {
    'element-table': ElementTable,
    'detail-dialog': consumableDetailDialog
  },
  methods: {
    changeTime(item) {
      if (item) {
        this.queryData.signTimeStart = item[0]
        this.queryData.signTimeEnd = item[1]
      } else {
        this.queryData.signTimeStart = ''
        this.queryData.signTimeEnd = ''
      }
    },
    //查询公司
    getCompanyList() {
      this.post(this.api.company.companyList, {
        name: '',
        status: 1,
        pageIndex: 0,
        pageSize: 200
      }).then((res) => {
        if (res.data.code === '200') {
          this.companyList = res.data.object
        }
      })
    },
    //查询列表
    getList() {
      this.loading = true
      this.post(this.api.slowDisease.getDeviceReport, {
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1,
        ...this.queryData
      }).then((res) => {
        this.loading = false
        if (res.data.code === '200') {
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum;
        }
      })
    },
    handleOption(op, row) {
      switch (op) {
        case 'select':
          this.pageIndex = 1
          this.getList()
          break;
        case 'export':
          this.commonFunction.exportFileData(this.queryData, this.api.slowDisease.deviceReportExport, '耗材统计报表', '.xlsx')
          break;
        case 'detail':
          this.showDialog = true
          this.dataObj = {deviceId: row.deviceId}
          break;
      }
    },
    handleChangeOption(){
      this.pageIndex = 1
      this.getList()
    },
    handleClearName(){
      this.pageIndex = 1
      this.getList()
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
  }
}
</script>

<style scoped>

</style>
